<template>
  <screen-cell :title="'第三方平台统计'">
    <div class="container">
      <div class="header fy-flex fy-flex__center">
        <div class="cell">
          <screen-title :title="'第三方平台数量'"></screen-title>
          <p>17</p>
        </div>
        <div class="cell">
          <screen-title :title="'接入设备总数'"></screen-title>
          <p>{{numData}}</p>
        </div>
      </div>
      <div class="content">
        <div class="title">·第三方平台数量排名<span>TOP 5</span></div>
        <div class="statistics">
          <statistics v-for="(item, index) in dataList" :key="index" :statisticsIndex="index" :title="item.title" :data="item.data"></statistics>
        </div>
      </div>
    </div>
  </screen-cell>
</template>

<script>
import ScreenCell from "@/components/common/ScreenCell.vue";
import ScreenTitle from "@/components/common/ScreenTitle.vue";
import Statistics from "@/components/common/Statistics.vue";
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {
    ScreenCell,
    ScreenTitle,
    Statistics
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      numData: 12275,
      dataList: [
        {
          title: "浙江大华",
          data: 92
        },
        {
          title: "浙江新门海",
          data: 89
        },
        {
          title: "中辰科技",
          data: 82
        },
        {
          title: "浙江华讯",
          data: 79
        },
        {
          title: "浙江方安",
          data: 75
        }
      ]
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    setInterval(() => {
      this.numData += 3;
    }, 4000);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 41vh;
  .header {
    position: relative;
    margin-top: 5%;
    width: 100%;
    height: 30%;
    .cell {
      margin-left: 2%;
      margin-right: 2%;
    }
    p {
      color: white;
      font-size: 3rem;
      font-weight: 900;
    }
  }
  .content {
    position: relative;
    width: 100%;
    height: 60%;
    .title {
      width: 70%;
      padding-left: 2%;
      font-size: 2rem;
      color: #ccdbff;
      box-sizing: border-box;
      span {
        margin-left: 1rem;
        color: #ffe824;
        font-size: 2rem;
      }
    }
  }
}
</style>
